const path = require('path');
const webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 
    /*入口*/
    // entry: path.join(__dirname, 'src/index.js'),
  // entry: [
  //   'react-hot-loader/patch',
  //   path.join(__dirname, 'src/index.js')
  // ],

  entry: {
    app: [
      'react-hot-loader/patch',
      path.join(__dirname, 'src/index.js')
    ],
    vendor: ['react', 'react-router-dom', 'redux', 'react-dom', 'react-redux']
  },
    
    /*输出到dist文件夹，输出文件名字为bundle.js*/
    // output: {
    //     path: path.join(__dirname, './dist'),
    //     filename: 'bundle.js'
    // },
  output: {
    path: path.join(__dirname, './dist'),
    // filename: 'bundle.js',
    filename: '[name].[hash].js',
    // chunkFilename: '[name].js',
    chunkFilename: '[name].[chunkhash].js'
  },

  /*src文件夹下面的以.js结尾的文件，要使用babel解析*/
  /*cacheDirectory是用来缓存编译结果，下次编译加速*/
  module: {
    rules: [{
      test: /\.js$/,
      use: ['babel-loader?cacheDirectory=true'],
      include: path.join(__dirname, 'src')
    },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8192
          }
        }]
      }
  ]
  },
  devServer: {
        contentBase: path.join(__dirname, './dist'),
    historyApiFallback: true,
    host: '0.0.0.0',
    hot: true,
    },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.join(__dirname, 'src/index.html')
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime'
    }),
    new webpack.HashedModuleIdsPlugin()
  ],
  // devtool: 'inline-source-map'
};
